<template>
  <el-row
    :gutter="20"
    justify="space-between"
  >
    <el-col :lg="12">
      <el-card
        shadow="never"
        :header="`${year}年股票分析`"
      >
        <div id="stock"></div>
      </el-card>
    </el-col>

    <el-col :lg="12">
      <el-card
        shadow="never"
        :header="`${year}年流量分析`"
      >
        <div id="flow"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
const { Stock, Sankey } = window.G2Plot
const year = new Date().getFullYear()

onMounted(() => {
  renderStock()
  renderFlow()
})

function renderStock() {
  fetch('https://gw.alipayobjects.com/os/antfincdn/qtQ9nYfYJe/stock-data.json')
    .then((data) => data.json())
    .then((data) => {
      const stockPlot = new Stock('stock', {
        data,
        xField: 'trade_date',
        yField: ['open', 'close', 'high', 'low'],
        meta: {
          vol: { alias: '成交量' },
          open: { alias: '开盘价' },
          close: { alias: '收盘价' },
          high: { alias: '最高价' },
          low: { alias: '最低价' },
        },
        tooltip: {
          crosshairs: {
            // 自定义 crosshairs line 样式
            line: { style: { lineWidth: 0.5, stroke: 'rgba(0,0,0,0.25)' } },
            text: (type, defaultContent, items) => {
              let textContent
              if (type === 'x') {
                const item = items[0]
                textContent = item ? item.title : defaultContent
              } else {
                textContent = `${defaultContent.toFixed(2)}`
              }
              return {
                position: type === 'y' ? 'start' : 'end',
                content: textContent,
                // 自定义 crosshairs text 样式
                style: { fill: '#dfdfdf' },
              }
            },
            // 自定义 crosshairs textBackground 样式
            textBackground: {
              padding: [4, 8],
              style: { fill: '#363636' },
            },
          },
        },
      })

      stockPlot.render()
    })
}

function renderFlow() {
  const DATA = [
    { source1: '首次打开', target: '首页 UV', value: 160 },
    { source1: '结果页', target: '首页 UV', value: 40 },
    { source1: '验证页', target: '首页 UV', value: 10 },
    { source1: '我的', target: '首页 UV', value: 10 },
    { source1: '朋友', target: '首页 UV', value: 8 },
    { source1: '其他来源', target: '首页 UV', value: 27 },
    { source1: '首页 UV', target: '理财', value: 30 },
    { source1: '首页 UV', target: '扫一扫', value: 40 },
    { source1: '首页 UV', target: '服务', value: 35 },
    { source1: '首页 UV', target: '活动推广', value: 25 },
    { source1: '首页 UV', target: '跳失', value: 10 },
    { source1: '首页 UV', target: '线下宣传', value: 30 },
    { source1: '首页 UV', target: '朋友圈', value: 40 },
    { source1: '首页 UV', target: '其他流向', value: 45 },
  ]
  const sankey = new Sankey('flow', {
    data: DATA,
    sourceField: 'source1',
    targetField: 'target',
    weightField: 'value',
    nodeWidthRatio: 0.018,
    nodePaddingRatio: 0.03,
    nodeState: { active: { style: { linewidth: 1.5 } } },
    tooltip: { showTitle: true },
  })

  sankey.render()
  sankey.setState('active', (datum) => datum.isNode && datum.name === '首次打开')
}
</script>